<template>
  <div class="tabbar">
    <ul>
      <li>
        <img src="../../assets/images/首页.png" alt="" />
        <span>首页</span>
      </li>
      <li>
        <img src="../../assets/images/列表.png" alt="" />
        <span>列表</span>
      </li>
      <li>
        <img src="../../assets/images/购物车.png" alt="" />
        <span>购物车</span>
      </li>
      <li>
        <img src="../../assets/images/我的.png" alt="" />
        <span>我的</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2rem;
  & ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
   & li {
      display: flex;
      flex-direction: column;
      justify-content: center;
    &  img {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>